$blue:              #0971ce !default;
$bluelight:         #33a2e5 !default;
$fontColor:         #4d4d4d !default;
$sidepading:        15px !default;

$warningcolor:      #e84512 !default;

html,
body{
  	color: $fontColor;
  	font-size: 20px;
  	letter-spacing: 0.5px;
  	font-family: Helvetica, Tahoma, Arial, STXihei, '华文细黑', 'Microsoft YaHei', '微软雅黑', SimSun, '宋体', Heiti, '黑体', sans-serif;
}
.icon-fire{
	// display: inline-block;
	// width: 0.8rem;
	// height: 1rem;
	// background: url(../images/i-fire.png) no-repeat 0 0;
	// background-size: 100% auto;
	 margin-right: 0.4rem;
	// margin-top: 0.45rem;
	// float: left;
	color: #f08177;
	font-size: 0.8rem;
}
a{
	color: #4d4d4d;
}
a:hover,
a:active,
a:focus{
	outline: none;
	text-decoration: none;
}

input {
  background: none;
  // background-color: transparent;
}

p{
	// margin: 0.6rem 0 !important;
	// line-height: 1.4;
}
.header{
    width: 100%;
    height: 2rem;
    padding: 0.3rem;
    background: #0971ce;
    padding-left: $sidepading;
    padding-right: $sidepading;
    // position: absolute;
    position: fixed;
    top: 0;
    z-index: 100;

    .backup{
      padding: 0 20px;
    	position: absolute;
    	left: 0;
    	top: 50%;
    	color: #fff;
    	font-size: 26px;
    	height: 28px;
    	margin-top: -14px;
    	display: inline-block;
    }

    .menu{
    	font-size: 20px;
    	color: #fff;
    	position: absolute;
    	left: 15px;
    	top: 50%;
    	margin-top: -10px;
    	height: 20px;
    	display: inline-block;
    }
}
.page-title{
	color: #fff;
	font-size: 0.8rem;
	margin: 0;
	line-height: 1.4rem;
	text-align: center;
}
.home-banner{
	img{
		width: 100%;
		height: 7.5rem;
	}
}
.search-form{
	padding: 0.4rem $sidepading;
	background: $blue;
	.weui-flex{
		background: #fff;
		border-radius: 3px;
	}
	.icon-search{
		font-size: 0.9rem;
		line-height: 1.4rem;
		margin-left: 0.3rem;
		color: #999;
	}
	input{
		border: none;
		font-size: 0.7rem;
	}
	.search-submit{
		background: $bluelight;
		color: #fff;
		border:none;
		font-size: 0.8rem;
		padding: 0 0.8rem;
		border-radius: 0 3px 3px 0;
	}
}
.home-btns{
	padding: 0 10px;
  font-size: 0.6rem;
	font-weight: bold;

	.col-xs-4{
		// height: 6.2rem;
    height: 100px;
		margin-top: 20px;
		text-align: center;
		display: block;
		// border-left: 1px solid #f7f7f7;
		// border-bottom: 1px solid #f7f7f7;
		color: #4d4d4d;
		&:hover{
			text-decoration: none;
			background: #f6f6f6;
		}
		&:focus{
			background: #f6f6f6;
		}
	}
	.col-xs-4:nth-child(3n+1){
		border-left: none;
	}
	i{
    line-height: 1.05;
		font-size: 50px;
    margin-bottom: 8px;
		color: $bluelight;
	}
}
/***新闻列表页**/
.news-item{
	padding: 0.8rem $sidepading;
	border-bottom: 1px solid #cccccc;
	color: #999;
	&:hover{
		color: #64b7f9;
		text-decoration: none;
	}
	.left{
		position: relative;
	}
	.news-title{
		margin: 0;
		font-size: 0.7rem;
		line-height: 1.4;
	}
	.post-date{
		font-size: 10px;
		color: #999;
		// position: absolute;
		// left: 0;
		// bottom: 0;
	}
	.news-thumbnail{
		img{
			width: 5.3rem;
			height: 3.2rem;
			margin-left: 0.5rem;
		}
	}
}
/*** 新闻内容页**/
.weui-article h1{
	margin-top: 0;
	line-height: 1.4;
	margin-bottom: 0.4rem;
}
.news-body{
	margin-top: 0.6rem;
}
.post-date{
	font-size: 10px;
	color: #999;
}
/***list style (新书推荐、检索结果、当前借阅、借阅历史)**/
.list-item {
	.weui-media-box__hd{
		width: 4.35rem;
		height: 6.5rem;
	}
	.weui-media-box__bd{
		font-size: 0.6rem;
		color: #808080;
		.weui-btn{
			float: right;
		}
	}
	.books-name{
		margin-top: 0;
		margin-bottom: 0.4rem;
		font-size: 0.8rem;
		color: #000;
	}
	.author{
		font-size: 0.6rem;
		color: #808080;
	}
	.bottom{
		padding: 0 $sidepading;
		height: 1.5rem;
		line-height: 1.5rem;
		color: #747474;
		font-size: 0.6rem;
	}
}
.list-item .weui-media-box_appmsg{
	align-items: flex-start;
}
.list-item .weui-media-box::before{
	left: 0;
	bottom: 0;
	top: auto;
}
.list-item .weui-btn_primary{
	color: #fff;
	border: none;
}
.list-item .weui-media-box:first-child::before{
	display: block;
}
.btn-green{
	background: #95d098;
}
.btn-green:active:not(.weui-btn_disabled) {
    background-color: #82bd85 ;
    color: rgba(255, 255, 255, 0.8);
}
.btn-bluelight{
	background: #64b7f9;
}
.btn-bluelight:active:not(.weui-btn_disabled) {
    background-color: #5caff1;
    color: rgba(255, 255, 255, 0.8);
}
.btn-blue{
	background:#0971ce;
}
.btn-blue:active:not(.weui-btn_disabled) {
	background-color: #005cb9;
    color: rgba(255, 255, 255, 0.8);
}
.btn-green::after,
.btn-bluelight::after,
.btn-blue::after{
	border: none;
}
.btn-disabled{
	background: #e7e7e7 !important;
	color: #a5a5a5 !important;
}
.current-list{
	.weui-media-box__hd{
		width: 2.5rem;
		height: 4rem;
	}
	.list-item::after{
		content: "";
		display: block;
		height: 0.5rem;
		width: 100%;
		background: #f6f6f6;
	}
}
.status-warning{
		color: $warningcolor;
	}
a.weui-btn:hover{
	text-decoration: none;
}
.top-tips{
	line-height: 2rem;
	font-size: 0.7rem;
	padding: 0 15px;
	border-bottom: 1px solid #e5e5e5;
}
.blue-bar{
	background: #01c0ff;
	color: #fff;
	font-size: 0.8rem;
	line-height: 2rem;
	height: 2rem;
	padding: 0 15px;
	position: relative;
}
.blue-bar::before{
	content: "";
	width: 0;
	height: 0;
	display: inline-block;
	border-bottom: 0.4rem solid #fff;
	border-left: 0.4rem solid transparent;
	border-right: 0.4rem solid transparent;
	position: absolute;
	left: 3rem;
	bottom: 0;
}
.result-tips::before{
	right: 2rem;
	left: auto;
}
.btn-renew {
	border-color: #fff;
	color: #fff;
	float: right;
	line-height: 1.3rem;
	height: 1.3rem;
	margin-top: 0.35rem;
}
.btn-renew:hover{
	color: #fff;
}
.btn-renew.weui-btn_plain-default:active:not(.weui-btn_plain-disabled) {
    border-color: rgba(255, 255, 255, 0.6);
    color: rgba(255, 255, 255, 0.6);
}
.current-lending{
	.header{
		// height: 3rem;
	}
}
.page-tabs{
  display: flex;

	border: 1px solid #fff;
	border-radius: 5px;
	overflow: hidden;
	height: 1.8rem;
	width: 10rem;
	margin: 0.3rem auto;
	line-height: 1.8rem;
	a{
    flex: 1 1;
		// width: 50%;
		text-align: center;
		display: inline-block;
		float: left;
		font-size: 0.7rem;
		color: #fff;
		&:hover{
			text-decoration: none;
			color: inherit;
		}
	}
	a.active{
		background: #fff;
		color: #5a5a5a;
	}
}
.personal-data-tabs{
	width: 12rem;
	border: 1px solid $blue;
	border-radius: 5px;
	margin: 0.5rem auto;
	height: 1.6rem;
	line-height: 1.6rem;
	a{
		// width: 33.333333%;
		color: #4d4d4d;
		border-right: 1px solid $blue;
		&:last-child{
			border-right: none;
		}
	}
	a.active{
		background:$blue;
		color: #fff;
	}
}
.history-list{
	.weui-flex{
		padding: 0.5rem 15px;
		border-bottom: 1px solid #e5e5e5;
		font-size: 0.6rem;
		line-height: 1;
	}
	.book-info{
		padding: 1rem 15px;
	}
	.bottom{
		padding: 0.5rem 15px;
		height: auto;
		text-align: right;
		line-height: 1;
		.weui-btn{
			// float: right;
		}
	}
	.list-item::after{
		content: "";
		display: block;
		height: 0.5rem;
		width: 100%;
		background: #f6f6f6;
	}
}
/***form***/
form{
	border-top: 1px solid #e5e5e5;
	.status-warning{
		font-size: 0.8rem;
		padding: 1rem $sidepading;
	}
	.weui-btn{
		width: 15rem;
		margin-top: 3rem;
	}

}
.form-item{
	border-bottom: 1px solid #e5e5e5;
	padding: 0.5rem $sidepading;
	font-size: 0.8rem;
	display: block;
	label{
		color: #000;
		margin: 0;
		font-weight: normal;
	}
	input{
		color: #666;
		border:none;
		// text-align: right;
	}
}
.form-action{
	padding: 1rem $sidepading;
	font-size: 0.8rem;
}
.personal-data{
	.weui-btn_mini{
		width: 6rem;
		margin-top: 15px;
		padding: 0.1rem 0;
		font-size: 0.8rem;
	}
	.weui-btn_plain-default{
		border-color: #70ade3;
		color: #0071ce;
	}
}
.form-item.weui-flex{
	display: flex;
}
.personal-data {
	.weui-flex__item{
		text-align: right;
	}
	.readonly{
		color: #b4b4b4;
	}
}
.form-title{
	font-size: 0.8rem;
	padding: 0.6rem $sidepading;
}
.seperate{
	background: #f6f6f6;
	height: 0.8rem;
}
.panel-login{
	background: #0971ce;
	padding: 2rem 0;
	text-align: center;
	.avatar{
		display: inline-block;
		width: 4rem;
		height: 4rem;
		border-radius:2rem;
		margin-bottom: 0.5rem;
	}
	.btn-login{
		border: 1px solid #fff;
		border-radius: 5px;
		color: #fff;
		font-size: 0.7rem;
		padding: 0.3rem 0.5rem;
	}
}
input[type="checkbox"] + .icon-ok{
	//display: none;
	color: $bluelight;
}
input[type="checkbox"]:checked + .icon-ok{
	//display: block;
	color: #e5e5e5;
}
.icon-sort-up,
.icon-sort-down{
	color: #95d098;
	font-size: 1.2rem;
}
.book-details{
	background: #f6f6f6;
	font-size: 0.7rem;
	line-height: 1.2;
	.weui-media-box_appmsg{
		align-items: flex-start;
	}
	.weui-media-box__hd{
		width: 4.2rem;
		height: 6rem;
	}

	.books-name{
		font-size: 0.9rem;
		color: #000;
		margin-top: 0;
	}
}
.medias{
	list-style: none;
	margin-bottom: 0;
	margin-top: 1rem;
	li{
		float: left;
		border-left: 1px solid #999;
		width: 25%;
		text-align: center;
		font-size: 1rem;
		color: #666;
		&:last-child {
			border-right: 1px solid #999;
		}
	}
}
.book-amounts{
	border-top: 1px solid #e5e5e5;
	padding: 0.3rem $sidepading;
	font-size: 0.7rem;
}
.book-item{
	.book-name{
		background: #f2f2f2;
	}
	.weui-flex__item{
		text-align: right;
	}
	label{
		color: #4d4d4d;
	}
}
.warn-tips{
	font-size: 0.7rem;
	padding: 0.5rem $sidepading;
	border-bottom: 1px solid #e5e5e5;
	color: #4d4d4d;
	ol{
		margin-left: 0.7rem;
		line-height: 1.4;
		li{
			margin: 0.3rem 0;
		}
	}
}
.system-setup{
	span{
		width: 1rem;
		display: inline-block;
		margin-right: 0.6rem;
		text-align: center;
	}
	i{
		font-size: 0.9rem;
		font-weight: lighter;
	}
}

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 1px solid #999;
  border-right-color: transparent;
  border-radius: 50%;

  vertical-align: text-bottom;

  animation: spin .6s linear 0s infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}


